<template>
  <div class="header">
    <li
      :class="{ active: isShow == i }"
      @click="sort(v, i)"
      v-for="(v, i) in tap"
      :key="i"
    >
      {{ v.name }}
    </li>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup(p, { emit }) {
    //   激活类
    let isShow = ref(0);
    let tap = ref([
      { name: "全部", id: "all" },
      { name: "未付款", id: "0" },
      { name: "已付款", id: "1" },
      { name: "已发货", id: "2" },
      { name: "已完成", id: "3" },
    ]);
    // 头部筛选
    function sort(v, i) {
      emit("sort", v.id);
      isShow.value = i;
    }
    return { tap, sort, isShow };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.active {
  background-color: rgb(7, 58, 3);
}
.header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: rgb(55, 102, 10);
  justify-content: space-around;
  li {
    color: #fff;
    height: 100%;
    flex: 1;
    line-height: 50px;
    text-align: center;
  }
}
</style>
